<template>
	<view class="bg-gray">
		<cu-custom :isBack="true">
			<block #content>
				命令记录
			</block>
		</cu-custom>

		<!-- <view style="position:fixed;top:160rpx;z-index:10000;width:100%;">
			<view class="flex justify-around align-center bg-white padding">
				<picker mode="date" :value="startDate" :end="formatDate(initEndTimestamp)" @change='startDateChange'>
					<view class="text-df" style="width: 100%;">{{startDate}}</view>
				</picker>
				<view class="text-df">{{$t('to')}}</view>
				<picker mode="date" :end="formatDate(initEndTimestamp)" @change='endDateChange'>
					<view class="text-df">{{endDate}}</view>
				</picker>
			</view>
		</view> -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="getDeviceBatchCmdList" :top="'180rpx'" style="position:relative;z-index:1;width:100%;">
			<view v-for="(arrItem,arrIndex) in listCmdData" :key="arrIndex">
				<view v-for="(item,index) in arrItem" :key="index" @tap="deviceBatchCmdLog(item)">
					<view class="bg-white light common-box text-sm margin padding">
						<view class="flex justify-between padding-bottom-sm"
							style="border-bottom:1px solid rgba(0, 0, 0, 0.1);">
							<view class="text-content">
								<text class="margin-right-sm">执行命令:</text>
								<text>{{item.name}}</text>
							</view>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">关联设备:</text>
							<text class="text-gray">{{item.associationName}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">执行类型:</text>
							<text :style="[{color:themeConfig.primaryColor}]">{{item.batchType}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">开始时间:</text>
							<text class="text-gray">{{item.startTime}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs">完成时间:</text>
							<text class="text-yellow">{{item.finishTime}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">执行设备数:</text>
							<text class="text-gray">{{item.execCount}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs">执行成功数:</text>
							<text class="text-yellow">{{item.successCount}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs">执行失败数:</text>
							<text class="text-yellow">{{item.failCount}}</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs">执行状态:</text>
							<text class="text-yellow">{{item.status}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import {
		formatDateTime,
		formatDate
	} from '@/util/formatTime'
	import * as storage from '@/util/storage'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins';
	export default {
		name: "deviceBatchCmd",
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false,
					empty: {
						use: true,
						fixed: true,
						top: '20%'
					},
				},
				startDate: '',
				endDate: '',
				startTimestamp: '',
				endTimestamp: '',
				initEndTimestamp: '',
				initEndDate: '',
				deviceId: null,
				listCmdData: [],
				currentPage: 1,
				pageSize: 10,
				dicts: ['cmd_execute_status'],
				dictsList: []
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.deviceId = option.deviceId
			this.startDate = this.$t('all')
			this.endDate = this.$t('all')
		},
		onShow() {
			this.init()
		},
		methods: {
			formatDate(time) {
				return formatDate(time, this.$t('unKnow'))
			},
			formatDateTime(time) {
				return formatDateTime(time, this.$t('unKnow'))
			},
			downCallback() {
				this.currentPage = 1
				this.listCmdData = []
				this.mescroll.resetUpScroll()
			},
			init() {
				this.initDate()
			},
			initDate() {
				let time = new Date()
				this.startTimestamp = Math.round(time.getTime() / 1000 - 7 * 24 * 60 * 60).toString()
				this.endTimestamp = Math.round(time.getTime() / 1000 + 1 * 10).toString()
				this.startDate = formatDate(this.startTimestamp)
				this.endDate = formatDate(this.endTimestamp)
				this.initEndTimestamp = this.endTimestamp
				this.getDeviceBatchCmdList()
			},
			getDeviceBatchCmdList() {
				showLoading(this.$t('loading'), false)
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let startTimestamp = this.startTimestamp
				let endTimestamp = this.endTimestamp
				// let params = {
				// 	startTime: formatDateTime(startTimestamp),
				// 	endTime: formatDateTime(endTimestamp),
				// 	pageNum: currentPage,
				// 	pageSize
				// }

				let params = {
					pageNum: currentPage,
					pageSize
				}
				ztIotApi.getDeviceBatchCmdList(params).then((res) => {
					const {
						rows,
						total,
						success
					} = res
					if (success) {
						this.mescroll.endByPage(rows.length, total)
						const index = currentPage - 1
						this.$set(this.listCmdData, index, rows)
						this.currentPage = currentPage + 1
					}
					hideLoading()
				})
			},
			startDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000).toString();
				const endTimestamp = this.endTimestamp
				if (endTimestamp < timestamp || endTimestamp == timestamp) {
					showToast(this.$t('lessEndDateTip'), 'none', 1000, false) //请选择小于结束日期
				} else {
					this.startTimestamp = timestamp
					this.startDate = e.detail.value
					this.currentPage = 1
					this.listCmdData = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
			endDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000 + 1 * 24 * 60 * 60).toString();
				const startTimestamp = this.startTimestamp
				if (startTimestamp > timestamp || startTimestamp == timestamp) {
					showToast(this.$t('greaterStartDateTip'), 'none', 1000, false) //请选择大于开始日期
				} else {
					this.endTimestamp = timestamp
					this.endDate = e.detail.value
					this.currentPage = 1
					this.listCmdData = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
			deviceBatchCmdLog(item) {
				uni.navigateTo({
					url: `/pages/deviceBatchCmdLog/deviceBatchCmdLog?id=${item.id}`
				})
			},
		},
		onShareAppMessage(res) {
			return {
				title: `中泰能`,
				path: `/pages/login/login`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}
</style>
